<template>
  <div class="photostudio-app" :class="{ 'acg-theme': style === 'acg' }">
    <!-- 导航栏 -->
    <header class="navbar">
      <div class="container">
        <!-- Logo + 主题切换组合区域 -->
        <div class="logo-section">

          <div class="theme-toggle">
            <button :class="{ active: style === 'normal' }" @click="setTheme('normal')">
              常规版
            </button>
            <button :class="{ active: style === 'acg' }" @click="setTheme('acg')">
              二次元版
            </button>
            <div class="slider" :class="{ 'to-acg': style === 'acg' }"></div>
          </div>
        </div>
        <div class="logo">
            <img src="@/assets/images/logo.svg" alt="顽皮彩云" />
          </div>
        <!-- 导航链接 -->
        <nav class="nav-links">
          <a href="#home">首页</a>
          <a href="#portfolio">作品</a>
          <a href="#services">服务</a>
          <a href="#about">关于</a>
          <a href="#contact">联系</a>
        </nav>
        <div class="menu-toggle" @click="showMobileMenu = !showMobileMenu">
          ☰
        </div>
      </div>

      <!-- 移动端菜单 -->
      <div v-if="showMobileMenu" class="mobile-menu">
        <a href="#home" @click="showMobileMenu = false">首页</a>
        <a href="#portfolio" @click="showMobileMenu = false">作品</a>
        <a href="#services" @click="showMobileMenu = false">服务</a>
        <a href="#about" @click="showMobileMenu = false">关于</a>
        <a href="#contact" @click="showMobileMenu = false">联系</a>
      </div>
    </header>

    <!-- 首页 Hero -->
    <section id="home" class="hero">
      <div class="hero-overlay">
        <div class="hero-content">
          <h1>捕捉每一刻的光影</h1>
          <p>专业人像 · 婚礼摄影 · 商业拍摄</p>
          <a href="#contact" class="btn-primary">预约拍摄</a>
        </div>
      </div>
    </section>

    <!-- 作品集 -->
    <section id="portfolio" class="section bg-light">
      <div class="container">
        <h2 class="section-title">精选作品</h2>
        <div class="portfolio-grid">
          <div class="portfolio-item" v-for="i in 8" :key="i">
            <img :src="`/lqq/profile/jpg/show/${style}-banner-${i}.jpg`" alt="作品" loading="lazy" />
          </div>
        </div>
      </div>
    </section>

    <!-- 服务 -->
    <section id="services" class="section">
      <div class="container">
        <h2 class="section-title">
          {{ style === 'acg' ? '✧ 我们の服务清单 ✧' : '我们的服务' }}
        </h2>
        <div class="services-grid">
          <div v-for="(service, index) in servicesContent[style]" :key="index" class="service-card">
            <div class="icon">{{ service.icon }}</div>
            <h3>{{ service.title }}</h3>
            <p>{{ service.description }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 关于 -->
    <section id="about" class="section bg-light">
      <div class="container about-container">
        <div class="about-image">
          <img :src="style === 'acg'
    ? 'https://picsum.photos/500/600?grayscale&blur=1'
    : 'https://picsum.photos/500/600?grayscale'" alt="摄影师" />
        </div>
        <div class="about-text">
          <h2>{{ aboutContent[style].title }}</h2>
          <p v-for="(paragraph, index) in aboutContent[style].paragraphs" :key="index">
            {{ paragraph }}
          </p>
        </div>
      </div>
    </section>

    <!-- 联系 -->
    <section id="contact" class="section">
      <div class="container">
        <h2 class="section-title">联系我们</h2>
        <form class="contact-form" @submit.prevent="handleSubmit">
          <input v-model="formData.name" type="text" placeholder="姓名" required />
          <input v-model="formData.contactInfo" type="text" placeholder="联系方式（QQ/微信）" required />
          <textarea v-model="formData.requirements" placeholder="需求描述（如：婚礼日期、拍摄类型等）" rows="4" required></textarea>
          <button type="submit" class="btn-primary" :disabled="isSubmitting">
            {{ isSubmitting ? '发送中...' : '发送预约' }}
          </button>
        </form>
        <div class="contact-info">
          <p>📞 xxx-xxxx-xxxx</p>
          <p>📍 上海市闵行区</p>
        </div>
      </div>
    </section>

    <!-- 页脚 -->
    <footer class="footer">
      <div class="container">
        <p>© 2025 顽皮彩云工作室. 保留所有权利。</p>
      </div>
    </footer>
  </div>
</template>

<script>
import { sendBookingRequest } from '@/api/cd/send';
export default {
  name: "Index",
  data() {
    return {
      showMobileMenu: false,
      style: 'normal', // 'normal' 或 'acg'
      aboutContent: {
        normal: {
          title: "关于顽皮彩云摄影工作室",
          paragraphs: [
            "我们是一支热爱光影与故事的摄影团队，成立于2020年。坚持“真实、自然、有温度”的拍摄理念，已为超过200位客户留下珍贵回忆。",
            "主理人有着多年的拍摄经验，与专业的团队一起，为每一个客户定格每一帧精彩瞬间。"
          ]
        },
        acg: {
          title: "✨ 关于「顽皮彩云」 ✨",
          paragraphs: [
            "这里是诞生于2020年的魔法摄影小队！(≧▽≦) 我们相信每一张照片都是一个闪闪发光的小宇宙～",
            "主理人是拥有五年魔法经验的「时之魔法师」，搭配超靠谱的伙伴团，为你定制独一无二的人生瞬间！",
            "无论是日常场照、外景纪实，还是棚拍正片，都能展现不一样的精彩瞬间！(๑•̀ㅂ•́)و✧"
          ]
        }
      },
      servicesContent: {
        normal: [
          {
            icon: '📸',
            title: '人像摄影',
            description: '自然光与情绪捕捉，打造独一无二的你。'
          },
          {
            icon: '💍',
            title: '婚礼跟拍',
            description: '记录爱的每一帧，珍藏一生的承诺。'
          },
          {
            icon: '🏢',
            title: '商业摄影',
            description: '为品牌注入视觉灵魂，提升产品质感。'
          }
        ],
        acg: [
          {
            icon: '👧✨',
            title: '场照拍摄',
            description: '用镜头唤醒你的二次元人格！超还原度+氛围感拉满～'
          },
          {
            icon: '💒💖',
            title: '棚拍外景',
            description: '今天你是主角！童话般的现场，我们为你全程高能记录！'
          },
          {
            icon: '🛍️🌟',
            title: '视频录制',
            description: '放下烦恼，来一段轰轰烈烈的二次元之旅吧！'
          }
        ]
      },
      formData: {
        name: '',
        contactInfo: '',
        requirements: ''
      },
      isSubmitting: false
    };
  },
  mounted() {
    this.initThemeFromUrl();
  },
  methods: {
    initThemeFromUrl() {
      const urlParams = new URLSearchParams(window.location.search);
      const theme = urlParams.get('theme');
      if (theme === 'acg' || theme === 'normal') {
        this.style = theme;
      }
    },
    setTheme(theme) {
      this.style = theme;
      const url = new URL(window.location);
      if (theme === 'normal') {
        url.searchParams.delete('theme');
      } else {
        url.searchParams.set('theme', theme);
      }
      window.history.replaceState({}, '', url);
    },
    async handleSubmit() {
      this.isSubmitting = true;
      this.formData.type = this.style;
      try {
        const response = await sendBookingRequest(this.formData);
        // 可选：弹出成功提示
        alert('预约已提交！我们会尽快与您联系～');
        // 清空表单
        this.formData = { name: '', contactInfo: '', requirements: '' };
      } catch (error) {
        console.error('提交失败:', error);
        alert('提交失败，请稍后再试或直接联系客服！');
      } finally {
        this.isSubmitting = false;
      }
    }
  }
};
</script>

<style scoped>
/* ========== 全局重置与基础 ========== */
.photostudio-app {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  scroll-behavior: smooth;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  width: 90%;
  margin: 0 auto;
}

/* ========== 导航栏 ========== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
}

/* Logo + 主题切换组合 */
.logo-section {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ========== 主题切换按钮动画 ========== */
.theme-toggle {
  position: relative;
  display: inline-flex;
  height: 32px;
  border: 1px solid #ddd;
  border-radius: 20px;
  overflow: hidden;
  background: white;
}

.theme-toggle button {
  position: relative;
  z-index: 2;
  padding: 0 16px;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 14px;
  line-height: 30px;
  color: #555;
  transition: color 0.3s ease;
}

.theme-toggle button.active {
  color: white;
}

.theme-toggle button:hover:not(.active) {
  color: #000;
}
/** Logo 图标 */
/* .logo {
  margin: 0;
  height: 100%;
  display: flex;
  align-items: center;
} */
.logo img {
  height: 40px;
  width: auto;
  display: block;
}

/* 滑块动画 */
.slider {
  position: absolute;
  top: 1px;
  left: 1px;
  width: calc(50% - 2px);
  height: calc(100% - 2px);
  background: #000;
  border-radius: 19px;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 1;
}

.slider.to-acg {
  transform: translateX(100%);
}

/* ========== ACG 主题覆盖样式 ========== */
.photostudio-app.acg-theme {
  --primary-color: #ff8ec7;
  --secondary-color: #8ab4f8;
  --bg-light: #fdf6ff;
  --text-color: #5a5a72;
  --btn-bg: #ff8ec7;
  --btn-hover: #ff6bb5;
  --card-border: #eae6ff;
  --hero-overlay: rgba(138, 180, 248, 0.3);
}

.photostudio-app.acg-theme .navbar {
  background: rgba(253, 246, 255, 0.95) !important;
  box-shadow: 0 2px 10px rgba(138, 180, 248, 0.2);
}

.photostudio-app.acg-theme .logo,
.photostudio-app.acg-theme .nav-links a {
  color: var(--text-color) !important;
}

.photostudio-app.acg-theme .nav-links a:hover {
  color: var(--primary-color) !important;
}

.photostudio-app.acg-theme .section-title {
  color: #6a5acd;
}

.photostudio-app.acg-theme .bg-light {
  background-color: var(--bg-light) !important;
}

.photostudio-app.acg-theme .btn-primary {
  background: var(--btn-bg) !important;
  color: white !important;
}

.photostudio-app.acg-theme .btn-primary:hover {
  background: var(--btn-hover) !important;
  transform: translateY(-2px);
}

.photostudio-app.acg-theme .hero-overlay {
  background: var(--hero-overlay) !important;
}

.photostudio-app.acg-theme .hero-content h1,
.photostudio-app.acg-theme .hero-content p {
  color: white;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.photostudio-app.acg-theme .service-card,
.photostudio-app.acg-theme .portfolio-item img {
  border: 1px solid var(--card-border);
  border-radius: 16px;
}

.photostudio-app.acg-theme .service-card h3,
.photostudio-app.acg-theme .about-text h2 {
  color: #7a6baa;
}

.photostudio-app.acg-theme .contact-form input,
.photostudio-app.acg-theme .contact-form textarea {
  border-color: #d0c4e9;
}

.photostudio-app.acg-theme .contact-form input:focus,
.photostudio-app.acg-theme .contact-form textarea:focus {
  border-color: var(--secondary-color);
}

.photostudio-app.acg-theme .footer {
  background: #f0e6ff;
  color: #8a7dbb;
}

/* ACG 模式下滑块使用渐变色 */
.photostudio-app.acg-theme .slider {
  background: linear-gradient(135deg, #ff8ec7, #8ab4f8);
}

/* ========== 其他通用样式 ========== */
.nav-links {
  display: flex;
  gap: 1.5rem;
}

.nav-links a {
  text-decoration: none;
  color: #555;
  font-weight: 500;
  transition: color 0.3s;
}

.nav-links a:hover {
  color: #000;
}

.menu-toggle {
  display: none;
  font-size: 1.5rem;
  cursor: pointer;
}

.mobile-menu {
  display: none;
  flex-direction: column;
  background: white;
  padding: 1rem 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.mobile-menu a {
  padding: 0.8rem 2rem;
  text-decoration: none;
  color: #333;
  border-bottom: 1px solid #eee;
}

.hero {
  height: 100vh;
  background: url('https://picsum.photos/1920/1080?blur=2') center/cover no-repeat;
  position: relative;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
}

.hero-content h1 {
  font-size: 2.8rem;
  font-weight: 800;
  margin-bottom: 1rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-content p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  opacity: 0.9;
}

.btn-primary {
  display: inline-block;
  background: #000;
  color: white;
  padding: 0.8rem 2rem;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.3s, transform 0.2s;
}

.btn-primary:hover {
  background: #333;
  transform: translateY(-2px);
}

.section {
  padding: 5rem 0;
}

.section-title {
  text-align: center;
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 3rem;
  color: #222;
}

.bg-light {
  background-color: #fafafa;
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  width: 75%;
  margin: 0 auto;
}

.portfolio-item img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 0.4s;
}

.portfolio-item img:hover {
  transform: scale(1.03);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  text-align: center;
  width: 75%;
  margin: 0 auto;
}

.service-card {
  padding: 2rem;
  border: 1px solid #eee;
  border-radius: 12px;
  transition: box-shadow 0.3s;
}

.service-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.service-card h3 {
  font-size: 1.4rem;
  margin-bottom: 0.8rem;
  color: #222;
}

.service-card p {
  color: #666;
}

.about-container {
  display: flex;
  align-items: center;
  gap: 3rem;
  width: 75%;
  margin: 0 auto;
}

.about-image img {
  width: 100%;
  max-width: 500px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.about-text h2 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
}

.about-text p {
  margin-bottom: 1rem;
  color: #555;
}

.contact-form {
  max-width: 600px;
  margin: 0 auto 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-form input,
.contact-form textarea {
  padding: 0.8rem 1rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.3s;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: #000;
}

.contact-info {
  text-align: center;
  color: #666;
}

.footer {
  background: #222;
  color: #ccc;
  text-align: center;
  padding: 2rem 0;
}

/* ========== 响应式 ========== */
@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }

  .nav-links {
    display: none;
  }

  .mobile-menu {
    display: flex;
  }

  .hero-content h1 {
    font-size: 2rem;
  }

  .about-container {
    flex-direction: column;
    text-align: center;
  }

  .section {
    padding: 3rem 0;
  }

  .section-title {
    font-size: 1.8rem;
  }

  .logo-section {
    align-items: flex-start;
  }
}
</style>